<template>
    <div>
    <el-card class="box-card" style="margin-bottom: 50px">
        <div style="margin-bottom: 20px">
            <span style="margin-right: 50px;">题目类型:</span>
           <el-select v-model="question.questionType" placeholder="题目类型">
               <el-option label="单选题" :value="1" ></el-option>
               <el-option label="多选题" :value="2" ></el-option>
               <el-option label="判断题" :value="3" ></el-option>
           </el-select>
        </div>
        <div style="margin-bottom: 20px">
            <span style="margin-right: 50px">归属题库:</span>
           <el-select v-model="question.bankId" placeholder="归属题库">
               <el-option label="A库" :value="1"></el-option>
               <el-option label="B库" :value="2"></el-option>
           </el-select>
        </div>
        <div style="margin-bottom: 20px">
            <div style="margin-right: 50px;margin-bottom: 50px;float: left">题目标题:</div>
            <el-input type="textarea" style="width: 70%" v-model="question.questionTitle"></el-input>
        </div>
        <div style="margin-bottom: 20px">
            <div style="margin-right: 50px;margin-bottom: 50px;float: left">题目标题:</div>
            <el-input type="textarea" style="width: 70%" v-model="question.questionContent"></el-input>
        </div>
        <div style="margin-bottom: 20px">
            <div style="margin-right: 50px;margin-bottom: 50px;float: left">题目解析:</div>
            <el-input type="textarea" style="width: 70%" v-model="question.analysis"></el-input>
        </div>
    </el-card>
    <el-card>
        <template>
            <el-form :model="selects" ref="selects">
                <el-table :data="selects.select" border stripe style="width: 100%;" highlight-current-row @select="handleSelectionChange" >
                    <el-table-column
                            type="selection"
                            width="55"
                    >
                    </el-table-column>
                    <el-table-column
                            width="55"
                            label="选项"
                    >
                        <template slot-scope="scope" >
                            {{scope.row.selectAbc}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="selectContent" label="答案内容">
                        <template slot-scope="scope">
                            <el-form-item v-if="scope.row.edit" :prop="'select.' + scope.$index + '.selectContent'" :rules='rules.selectContent'>
                                <el-input v-model="scope.row.selectContent" placeholder="答案内容"></el-input>
                            </el-form-item>
                            <span v-else>{{scope.row.selectContent}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.edit" type="text" size="medium" @click="confirmAdd(scope.row,'selects')">
                                <i class="el-icon-check" aria-hidden="true"></i>
                            </el-button>
                            <div v-else>
                                <el-button type="text" size="medium" @click="editData(scope.row)">
                                    <i class="el-icon-edit" aria-hidden="true"></i>
                                </el-button>
                                <el-button type="text" size="medium" @click="deleteData(scope.row,scope.$index)">
                                    <i class="el-icon-delete" aria-hidden="true"></i>
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <el-button type="text" @click="addData(eFlag++)">添加数据</el-button>
            <el-divider></el-divider>
            <el-button disabled @click="submitData('selects')">测试 </el-button>
            <el-button @click="submitFrom()">提交 </el-button>
            <el-button @click="submitUpdateFrom()">修改 </el-button>
        </template>
    </el-card>
    </div>
</template>
<script>
    import {GetQuestion, SetQuestion, updateQuestion} from "../../request/api";
    export default {
        created(){
            // if(this.$store.state)
            this.getUpdateInfo();

        },
        data() {
            return {
                lengthFlag:0,
                eFlag:0,
                question: {
                    questionTitle: "",     //题目标题
                    questionContent: "",       //题目内容
                    questionType: "",          //1单选2多选3判断4填空5简答题
                    questionImage: "",         //题目内容的图片
                    rightAnswer:"",           //正确答案
                    analysis: "",              //题目解析
                    bankId: "",              //题目属于那个题库
                    questionSelect:[]
                },
                selectBody:[],
                // selectContent: "demo",
                selects: {
                    select: [
                    ],
                },
                selectItem:[],
                rules: {
                    selectContent: {
                        required: true,
                        message: '请输入选项',
                    },

                },
            }
        },
        methods: {
            // 提交
            submitFrom(){
                this.submitData('selects');
                SetQuestion({"question":this.question,"selectBody": this.selectBody}
                ).then(resp=>{
                    console.log(resp)
                    if (resp.data.code==200){
                        this.$message.success('添加成功!')
                        this.$router.push("/studentHome/topicList")
                    }
                })
            },
            //获取修改信息
            getUpdateInfo(){
                if (this.$store.state.questionId!=''){
                    GetQuestion(this.$store.state.questionId).then(resp=>{
                        console.log(resp)
                        if (resp.data.code==200){
                            let {question}=resp.data.data
                            this.question=question;
                            this.selects.select=question.questionSelect;
                            this.questionSelect=[];
                            this.eFlag=this.selects.select.length;
                        }
                    });
                }
                this.$store.state.questionId='';
                // GetQuestion(scope.row.id).then(resp=>{
                //     console.log(resp)
                // });

            },
            submitUpdateFrom(){
                this.submitData('selects');
                updateQuestion({"question":this.question,"selectBody": this.selectBody})
                    .then(resp=>{
                        console.log(resp)
                    })
            },
            //添加
            addData(index) {
                this.selects.select.push({
                    edit: true,
                    selectAbc:String.fromCharCode(65+index)
                });
            },
            //确认添加
            confirmAdd(row, formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        row.edit = false;
                    }
                })
            },
            //修改
            editData(row) {
                row.edit = true;
            },
            //删除
            deleteData(row, index) {
                this.selects.select.splice(index, 1);
            },
            submitData(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let i=0;
                        while(this.selects.select.length>i){
                            this.selectBody.push({'selectContent':this.selects.select[i].selectContent,'selectAbc':this.selects.select[i].selectAbc});
                            i++
                        }
                    }
                })
            },
            handleSelectionChange(selection, row) {
                this.question.rightAnswer='';

                for (let i=0; selection.length > i;i++){
                    let t=this.question.rightAnswer+selection[i].selectAbc;
                    this.question.rightAnswer=t

                }

            }
        }
    }
</script>
<style>
    .text {
        font-size: 14px;
    }

    .item {
        padding: 18px 0;
    }

    .box-card {
        width: 100%;
        text-align: left;
    }
</style>